import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Switch } from 'antd';
import ProTable from '@ant-design/pro-table';
import Addserver from "@/pages/customerService/CustomerServiceList/components/addServer";
import Addserveritem from "@/pages/customerService/CustomerServiceList/components/addSeverItem";
import  {ModalForm,} from '@ant-design/pro-form';

// ID wexinname image CSname status addtime 操作

const tableListDataSource = [];
const nameArr = ['大明','二明','三明','四明','五明','六明']
for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    key: `${i+1}`,
    weixinname: 'AppName',
    id: Math.floor(Math.random() * 20),
    image: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    CSname:nameArr[Math.floor(Math.random() * nameArr.length)],
    status:true,
    addtime: '2021-8-31',
  });
}

const columns = [
  {
    title: 'ID',
    // width: 80,
    dataIndex: 'id',
    key:'id'
  },
  {
    title: '微信用户名称',
    dataIndex: 'weixinname',
    // align: 'right',
    key:'weixinname'
  },
  {
    title: '客服头像',
    dataIndex: 'image',
    key: 'image',
    valueType: 'image',
  },
  {
    title: '客服名称',
    dataIndex: 'CSname',
    key:'CSname'
  },
  {
    title: '账号状态',
    dataIndex: 'status',
    key:'status',
    render: () => [
      <Switch key='status' checkedChildren="开启" unCheckedChildren="关闭" />
    ],
  },
  {
    title: '添加时间',
    dataIndex: 'addtime',
    key:'addtime'
  },
  {
    title: '操作',
    align:'center',
    valueType: 'option',
    fixed: 'right',
    key: 'option',
    render: () => [
      <ModalForm
        title="编辑客服"
        trigger={
          <span><a key="link1"> 编辑 </a>  </span>
        }
      >
        <Addserveritem />
      </ModalForm>,
      <span><a key="link2"> 删除 </a>  </span>,
      <ModalForm
        title="工作台"
        trigger={
          <a key="link3"> 进入工作台 </a>
        }
      >
        <h1>工作台尚未开启，敬请期待</h1>
      </ModalForm>,
    ],
  },
]

const List = () => {
  return (
    <div>
      <PageContainer
        header={{
          breadcrumb: {},
        }}
      >
        <ProTable
          columns={columns}
          request={(params, sorter, filter) => {
            // 表单搜索项会从 params 传入，传递给后端接口。
            console.log('这里',params, sorter, filter);
            console.log(tableListDataSource)
            return Promise.resolve({
              data: tableListDataSource,
              success: true,
            });
          }}
          rowKey="key"
          pagination={{
            showQuickJumper: true,
          }}
          options={false}
          search={false}
          dateFormatter="string"
          headerTitle={<Addserver />}
        />
      </PageContainer>
    </div>
  );
};

export default List;
